<template>
  <div class="personnel-track-container ">

    <div class="personnel-track left-back" v-for="personInfo in personInfoList" :key="personInfo.name">
    <div class="info-section">
      <div class="info-row">
        <div class="info-item">
          <span class="label">姓名：</span>
          <span class="value">{{ personInfo.name }}</span>
        </div>
        <div class="info-item">
          <span class="label">工种：</span>
          <span class="value">{{ personInfo.jobType }}</span>
        </div>
      </div>
      <div class="info-row">
        <div class="info-item">
          <span class="label">状态：</span>
          <span class="value status">{{ personInfo.status }}</span>
        </div>
        <div class="info-item">
          <span class="label">剩余电量：</span>
          <span class="value">{{ personInfo.battery }}%</span>
        </div>
      </div>
      <div class="info-row">
        <div class="info-item location">
          <span class="label">区域：</span>
          <span class="value">{{ personInfo.location }}</span>
        </div>
      </div>
      <div class="button-group">
        <button class="action-btn">定位</button>
        <button class="action-btn">轨迹</button>
      </div>
    </div>
    <div class="status-card" :class="{ 'normal': personInfo.healthStatus === '正常' }">
      <span>状态</span>
      <span class="health-status">{{ personInfo.healthStatus }}</span>
    </div>
  </div>
  </div>
</template>

<script setup>
import { ref,onMounted } from 'vue'
import { getPersonnelTrack } from "@/js/api/businessApi.js"
const personInfoList = ref([])

onMounted(() => {
  getPersonnelTrack({ projectId: "19" }).then((data) => {
    personInfoList.value = (data && data.data) || [
      {
        "teamId": "string",
        "teamName": "string",
        "totalNum": 0,
        "workers": [
          {
            "name": "string",
            "type": "string",
            "power": "string",
            "powerState": "string",
            "area": "string",
            "status": "string"
          }
        ]
      },{
        "teamId": "string",
        "teamName": "string",
        "totalNum": 0,
        "workers": [
          {
            "name": "string",
            "type": "string",
            "power": "string",
            "powerState": "string",
            "area": "string",
            "status": "string"
          }
        ]
      },{
        "teamId": "string",
        "teamName": "string",
        "totalNum": 0,
        "workers": [
          {
            "name": "string",
            "type": "string",
            "power": "string",
            "powerState": "string",
            "area": "string",
            "status": "string"
          }
        ]
      },{
        "teamId": "string",
        "teamName": "string",
        "totalNum": 0,
        "workers": [
          {
            "name": "string",
            "type": "string",
            "power": "string",
            "powerState": "string",
            "area": "string",
            "status": "string"
          }
        ]
      }].map(item=>{
        return {  
          name: item.workers.name || '暂无',
          jobType: item.workers.type || '暂无',
          battery: item.workers.power || 0,
          location: item.workers.area || '暂无' ,
          healthStatus: item.workers.status || '正常'
        }
      });
      console.log(personInfoList.value);
  })
})
</script>

<style scoped>
.personnel-track-container{
  margin: 10px;
    width: 100%;
    height: 525px;
    overflow-y: auto;
}
.personnel-track {
  border-radius: 8px;
  width: 100%;
  padding: 20px;
  color: white;
  margin-bottom: 10px;
  position: relative;
  min-height: 185px;
}

.info-section {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.info-row {
  display: flex;
  justify-content: flex-start;
  gap: 40px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 180px;
}

.info-item.location {
  width: 100%;
}

.label {
  color: #8F959E;
  font-size: 16px;
}

.value {
  color: #fff;
  font-size: 16px;
}

.value.status {
  color: #4FCCFF;
}

.button-group {
  display: flex;
  gap: 20px;
  margin-top: 10px;
  justify-content: center;
}

.action-btn {
  background: #1B3B64;
  color: #4FCCFF;
  border: none;
  padding: 8px 30px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.action-btn:hover {
  background: #264b7c;
}

.status-card {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(27, 59, 100, 0.5);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 81px;
  height: 109px;
  justify-content: center;
}

.status-card.normal {
  border: 1px solid #4CAF50;
}

.status-card span:first-child {
  color: #8F959E;
  font-size: 14px;
}

.health-status {
  color: #4CAF50;
  font-size: 24px;
  font-weight: 500;
}
</style>